<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <br>
    <div id="mybaby"></div>
    <div> <Button id="btn1">小姐姐请进来</Button> </div>
    <Button id="btn2">打开新的窗口</Button><br />

    <h1> <a id="aHref" href="https://jspang.com">技术胖的博客</a> </h1>

    <Button id="mybtn">用window.open打开做子窗口</Button>
    <br>
    <Button id="mybtn2">window.open()子向父窗口通信</Button>
    <div id="mytext"></div>
    <br>
    <button id="mybtn3">选择文件对话框</button>
    <button id="openBtn">打开文件</button>
    <img id="images" src="" alt="">
    <button id="saveBtn">保存文件</button>
    <button id="notifyBtn">通知消息</button>
    <div>
      激活码：<span id="code">jspangcom1234234242</span> <button id="btn">复制激活码</button>
    </div>

  </body>
  <script src="./renderer.js"></script>
  <script src="../src/renderer/index.js"></script>
  <script src="../src/renderer/openLink.js"></script>

</html>

<script>
  const { dialog } = require('electron').remote

  //选择文件
  var openBtn = document.querySelector('#openBtn');
  openBtn.onclick = function () {
    console.log(1234546)
    dialog.showOpenDialog({
      title: '请选择你喜欢的小姐姐照片',
      defaultPath: 'xiaojiejie.jpg',
      buttonLabel: '选择图片',
      filters: [
        { name: 'jpg', extensions: ['jpg'] }
      ]
    }).then(result => {
      document.querySelector('#images').setAttribute("src", result.filePaths[0]);
      console.log(result)
    }).catch(err => {
      console.log(err)
    })
  }


  //保存文件
  document.getElementById('saveBtn').onclick = function () {
    dialog.showSaveDialog({
      title: '保存文件',
    }).then(result => {
      console.log(result)
      fs.writeFileSync(result.filePath, '[data:这是数据]')
    }).catch(err => {
      console.log(err)
    })
  }


  //就是当断网和重新链接到网络时
  window.addEventListener('online', function () {
    alert('官人，我来了，我们继续哦！')
  })
  window.addEventListener('offline', function () {
    alert('小女子先行离开一会，请稍等！')
  })



  //底部通知消息的制作
  var notifyBtn = document.getElementById('notifyBtn');
  var option = {
    title: new Date().toUTCString(),
    body: '有大官人刚翻了你的牌子',
  }
  notifyBtn.onclick = function () {
    new window.Notification(option.title, option)
  }


  //复制激活码功能实现
  const { clipboard } = require('electron')
  const code = document.getElementById('code')
  document.getElementById('btn').onclick = function () {
    clipboard.writeText(code.innerHTML)
    alert('复制成功')
  }

</script>

<style>
  button {
    margin-top: 5px;
  }
</style>